<script setup lang="ts">
import { onMounted, watch, ref } from 'vue'
import type { Ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import { useCommonStore } from '@/stores'
import {
  sendCodeServer,
  updateUserInfoServer,
  bindPhoneServer,
  bindEmailServer
} from '@/api/server/account'
import { fileUpload } from '@/api/server/file'
import type { BindEmailDTO, BindPhoneDTO } from '@/api/DTO/account'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const commonStore = useCommonStore()
//验证码冷却时间
const startCoolDown = () => {
  // 设置冷却时间为5秒
  commonStore.coolDown = commonStore.coolDown > 0 ? commonStore.coolDown : 5
  // 启动定时器，每秒减少1秒
  commonStore.coolDownInterval = setInterval(() => {
    if (commonStore.coolDown > 0) {
      commonStore.coolDown--
    } else {
      // 冷却时间结束，清除定时器
      clearInterval(commonStore.coolDownInterval)
      commonStore.removeCoolDownInterval()
      commonStore.coolDown = 0
    }
  }, 1000)
}
//验证码发送
const code: Ref<any> = ref(null)
const sendCode = async (type: string) => {
  if (type == 'phone') {
    const res = await sendCodeServer(bindPhoneDTO.value.phone)
    console.log(res)
  } else if (type == 'email') {
    const res = await sendCodeServer(bindEmailDTO.value.email)
  }
}
//编辑框
const isBindingPhone: Ref<any> = ref(false)
const isBindingEmail: Ref<any> = ref(false)
//头像更新
const updateAvatar = async (file: any) => {
  const formData = new FormData()
  formData.append('files', file.raw)
  const res = await fileUpload(formData)
  console.log(res)
  userStore.user.avatar = res.data[0]
}
//更新个人信息
const updateUserInfo = async () => {
  //更新个人信息
  await updateUserInfoServer(userStore.user)
}
// 绑定手机号
const bindPhoneDTO: Ref<BindPhoneDTO> = ref({
  phone: '',
  imageBase64: '',
  code: ''
})
const bindPhone = async () => {
  await bindPhoneServer(bindPhoneDTO.value)
}
// 绑定邮箱
const bindEmailDTO: Ref<BindEmailDTO> = ref({
  email: '',
  imageBase64: '',
  code: ''
})
const bindEmail = async () => {
  await bindEmailServer(bindEmailDTO.value)
}
onMounted(() => {
  commonStore.coolDownInterval = setInterval(() => {
    if (commonStore.coolDown > 0) {
      commonStore.coolDown--
    } else {
      // 冷却时间结束，清除定时器
      clearInterval(commonStore.coolDownInterval)
      commonStore.removeCoolDownInterval()
      commonStore.coolDown = 0
    }
  }, 1000)
})
</script>

<template>
  <div class="user">
    <el-card>
      <template #header>
        <el-button @click="router.back()">返回</el-button>
        <n-flex justify="center" class="head">
          <el-text>{{ userStore.user.username }}的个人信息 </el-text>
        </n-flex>
      </template>
      <template #default>
        <n-flex justify="center">
          <el-card body-style="min-width:600px;">
            <el-form
              label-position="left"
              label-width="auto"
              style="max-width: 600px"
              v-if="!isBindingPhone && !isBindingEmail"
            >
              <el-form-item label="用户名">
                <el-input
                  :model-value="userStore.user.username"
                  readonly
                  disabled
                />
              </el-form-item>
              <el-form-item label="用户昵称">
                <el-input v-model="userStore.user.nickname" />
              </el-form-item>
              <el-form-item label="用户头像">
                <el-popover
                  placement="top-start"
                  title="提示"
                  :width="100"
                  trigger="hover"
                  content="点击上传用户头像"
                  :show-after="500"
                >
                  <template #reference>
                    <el-upload
                      class="avatar-uploader"
                      :auto-upload="false"
                      :on-change="updateAvatar"
                      :show-file-list="false"
                    >
                      <el-image
                        :src="userStore.user.avatar"
                        style="width: 178px; height: 178px"
                        lazy
                        v-if="userStore.user.avatar"
                      >
                        <template #viewer>用户头像</template>
                      </el-image>
                      <el-icon class="avatar-uploader-icon" v-else
                        ><Plus
                      /></el-icon>
                    </el-upload>
                  </template>
                </el-popover>
              </el-form-item>
              <el-form-item label="用户简介">
                <el-input
                  v-model="userStore.user.description"
                  type="textarea"
                  :maxlength="300"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows: 8 }"
                  resize="both"
                />
              </el-form-item>
              <el-form-item label="用户球球">
                <el-input v-model="userStore.user.qqnumber" />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input
                  v-model="userStore.user.phone"
                  v-if="userStore.user.phone"
                  disabled
                  readonly
                />
                <el-button type="warning" v-if="userStore.user.phone" plain
                  >解绑</el-button
                >
                <el-button
                  type="warning"
                  v-else
                  plain
                  @click="isBindingPhone = !isBindingPhone"
                  >绑定</el-button
                >
              </el-form-item>
              <el-form-item label="邮箱号">
                <el-input
                  v-model="userStore.user.email"
                  v-if="userStore.user.email"
                  disabled
                  readonly
                />
                <el-button type="warning" v-else plain>绑定</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  @click="updateUserInfo"
                  style="width: 100%"
                  >更新</el-button
                >
              </el-form-item>
            </el-form>
            <!-- 绑定手机号 -->
            <el-form
              class="edit"
              v-if="isBindingPhone"
              label-position="left"
              label-width="auto"
              style="max-width: 600px"
            >
              <el-form-item>
                <h1 class="title">绑定手机号</h1>
              </el-form-item>
              <el-form-item
                @click="
                  () => {
                    isBindingEmail = false
                    isBindingPhone = false
                  }
                "
              >
                <el-icon><ArrowLeft /></el-icon>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="bindPhoneDTO.phone"></el-input>
              </el-form-item>
              <el-form-item label="验证码">
                <n-flex justify="space-between" style="width: 100%">
                  <el-input
                    label="验证码"
                    style="width: 200px"
                    v-model="bindPhoneDTO.code"
                  ></el-input>
                  <el-button
                    type="primary"
                    plain
                    v-if="commonStore.coolDown === 0"
                    @click="sendCode('phone')"
                    >获取验证码</el-button
                  >
                  <el-button type="primary" plain v-else
                    >({{ commonStore.coolDown }})s 重新发送</el-button
                  >
                </n-flex>
              </el-form-item>
              <el-form-item>
                <el-button style="width: 100%" type="success" plain
                  >绑定</el-button
                >
              </el-form-item>
            </el-form>
            <!-- 绑定邮箱 -->
            <el-form
              class="edit"
              v-if="isBindingEmail"
              label-position="left"
              label-width="auto"
              style="max-width: 600px"
            >
              <el-form-item
                @click="
                  () => {
                    isBindingEmail = false
                    isBindingPhone = false
                  }
                "
              >
                <el-icon><ArrowLeft /></el-icon>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="userStore.user.email"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </n-flex>
      </template>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.user {
  width: 100%;
  height: 100%;
  .el-card {
    min-height: 100%;
    .head .el-text {
      color: aqua;
      font-size: 25px;
      font-style: italic;
    }
  }
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  .title {
    margin: 0 auto;
    font-style: italic;
    background: #66ccff;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
</style>
